<template>
  <div class="epsoide">
    <div class="index-container">
      <span class="plain">No.</span>
      <span class="index">{{index}}</span>
      <span class="vertical-line"></span>
    </div>
    <div class="date">
      <span class="month">{{pubDate.month}}</span>
      <span class="year">{{pubDate.year}}</span>
    </div>
  </div>
</template>

<script>
import {formatTime} from '@/utils/index'

export default {
  name: 'Epsoide',
  data () {
    return {
      pubDate: {},
      month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    }
  },
  props: {
    date: {
      type: String
    },
    index: {
      type: Number
    }
  },
  methods: {
    _initDate () {
      let newDate = formatTime(this.date).split('/')
      this.pubDate = {
        month: this.month[parseInt(newDate[1]) - 1],
        year: newDate[0]
      }
    }
  },
  mounted () {
    this._initDate()
  }
}
</script>

<style lang="stylus" scoped>
  .epsoide
    display inline-flex
    flex-direction row
    line-height 30px
    .index-container
      display flex
      flex-direction row
      align-items baseline
      .index
        font-size 30px
        font-weight 800
        margin-right 7px
      .vertical-line
        height 22px
        margin-right 7px
        border-left 1px solid black
      .plain
        font-size 16px
    .date
      display flex
      flex-direction column
      justify-content center
      font-weight 500
      .month
        font-size 12px
        line-height 12px
        padding-bottom 2px
        margin-right 2rpx
      .year
        font-size 10px
        line-height 10px
        padding-bottom 3px
</style>
